<!DOCTYPE html>
<html>

	<head>
		<!-- 声明文档使用的字符编码 -->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<!-- 为移动设备添加 viewport -->
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
		<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
		<meta name="HandheldFriendly" content="true">
		<!-- 优先使用 IE 最新版本和 Chrome -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>黑图视界</title>
		<meta name="keywords" content="黑图视界">
		<meta name="description" content="黑图视界">
		<script type="text/javascript" src="../js/setFontSize.js"></script>
		<script type="text/javascript" src="../js/layui/layui.js" ></script>
		<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="../js/vue.js" ></script>
		<script type="text/javascript" src="../js/axios.js" ></script>
		<script type="text/javascript" src="../js/getParameter.js" ></script>
		<link rel="stylesheet" href="../js/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="../css/swiper.min.css" />
		<link rel="stylesheet" href="../css/main.css" />
	</head>

	<body>
	<div id="app">
		<main>
			<section class="buyTicket myTicket picBg">
				<div class="container">
					<ul class="list whiteBg radius20 pad30">
						<li class="listItem clearfix" v-for="order in pageInfo.list">
							<div class="icon iconCR"></div>
							<div class="text">
								<h6 class="name">{{order.ticket.name}}</h6>
								<div class="number">订单编号：{{order.id}}</div>
							</div>
							<div class="status status1" v-show="order.status==0">未使用</div>
							<div class="status status3" v-show="order.status==1">已退票</div>
							<div class="status status2" v-show="order.status==2">已核销</div>
							<a href="javascript:void(0)" class="buy" @click="orderDetail(order.id)">详情</a>
						</li>
						<!--<li class="listItem clearfix">
							<div class="icon iconET"></div>
							<div class="text">
								<h6 class="name">儿童票</h6>
								<div class="number">订单编号：111111111111</div>
							</div>
							<div class="status status2">已核销</div>
							<a href="ticketDe1.html" class="buy">详情</a>
						</li>
						<li class="listItem clearfix">
							<div class="icon iconXS"></div>
							<div class="text">
								<h6 class="name">学生票</h6>
								<div class="number">订单编号：111111111111</div>
							</div>
							<div class="status status3">已退票</div>
							<a href="ticketDe1.html" class="buy">详情</a>
						</li>
						<li class="listItem clearfix">
							<div class="icon iconSR"></div>
							<div class="text">
								<h6 class="name">双人票</h6>
								<div class="number">订单编号：111111111111</div>
							</div>
							<div class="status status4">拒绝退票</div>
							<a href="ticketDe2.html" class="buy">详情</a>
						</li>
						<li class="listItem clearfix">
							<div class="icon iconLR"></div>
							<div class="text">
								<h6 class="name">老人票</h6>
								<div class="number">订单编号：111111111111</div>
							</div>
							<div class="status status5">退票中</div>
							<a href="ticketDe1.html" class="buy">详情</a>
						</li>
						<li class="listItem clearfix">
							<div class="icon iconSAN"></div>
							<div class="text">
								<h6 class="name">三人票</h6>
								<div class="number">订单编号：111111111111</div>
							</div>
							<div class="status status5">退票中</div>
							<a href="ticketDe1.html" class="buy">详情</a>
						</li>-->
					</ul>
				</div>
				<div id="test1" style="text-align: center"></div>
			</section>			
		</main>
	</div>
	<script>
		let app1=new Vue({
			el:"#app",
			data:{pageInfo:{}},
			methods:{
				find(start,pageSize){
					axios.get("/ticket/findTicketByUid",{
						params:{
							start:start,
							pageSize:pageSize,
							navigatePages:4,
							uid:getParameter("id")
						}
					})
				.then(function(response){
					console.log(response);
					app1.pageInfo=response.data;
				});
				},
				orderDetail(id){
					location.href="/userclient/ticketDe1.html?oid="+id;
				},
			},
			created(){
				this.find(1,4);
			}
		});
	</script>
	<script>
		layui.use('laypage', function(){
			var laypage = layui.laypage;

			//执行一个laypage实例
			laypage.render({
				elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
				,count: app1.pageInfo.total //数据总数，从服务端得到
				,limit:5
				,jump(obj){
					app1.find(obj.curr,4);
				}
			});
		});
	</script>
		<script type="text/javascript" src="../js/swiper.min.js"></script>
		<script type="text/javascript" src="../js/layer/layer.js" ></script>
		<script type="text/javascript" src="../js/main.js"></script>
	</body>

</html>